Skip to content

fix(css): ImageFrame media sizing for aspect ratio#1212

Merged
junghyeonsu merged 4 commits intodevfrom
fix/image-frame-width-height
Feb 4, 2026
Merged

fix(css): ImageFrame media sizing for aspect ratio#1212
junghyeonsu merged 4 commits intodevfrom
fix/image-frame-width-height

Conversation

@junghyeonsu
Copy link
Contributor

@junghyeonsu junghyeonsu commented Feb 4, 2026 •
edited by coderabbitai bot
Loading

Summary by CodeRabbit

  • 버그 수정
    • ImageFrame의 이미지 및 비디오 요소가 컨테이너의 전체 너비·높이를 채우도록 조정되어 레이아웃과 크롭 동작이 더 일관되고 예측 가능합니다.
  • 문서
    • ImageFrame용 스토리(라이트/다크 테마 및 다양한 글꼴 배율 포함) 추가로 시각적 테스트와 사용 예시를 제공합니다.
  • 새 기능
    • 예제 앱에 ImageFrame 목록 화면과 해당 내비게이션 경로가 추가되어 다양한 이미지 사례를 앱 내에서 탐색할 수 있습니다.

@junghyeonsu junghyeonsu self-assigned this Feb 4, 2026
@changeset-bot
Copy link

changeset-bot bot commented Feb 4, 2026 •
edited
Loading

🦋 Changeset detected

Latest commit: d65c45a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages
Name Type
@seed-design/css Patch
@seed-design/figma Patch
@seed-design/mcp Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Feb 4, 2026 •
edited
Loading

📝 Walkthrough

Walkthrough

ImageFrame 내부 미디어 요소에 레이아웃 스타일(display: block, width: 100%, height: 100%)을 추가하고 changeset을 추가했으며, ImageFrame Storybook 스토리 및 예제 앱용 StackFlow Activity, 라우트, 등록과 네비게이션 항목을 도입합니다.

Changes

Cohort / File(s) Summary
Changeset 문서
.changeset/fruity-drinks-mate.md		 @seed-design/css 패치 버전 범프를 기록하는 changeset 항목 추가.
ImageFrame 레이아웃 스타일
packages/qvism-preset/src/recipes/image-frame.ts		 ImageFrame 후손 img/video에 display: block, width: 100%, height: 100% 추가(기존 objectFit: cover 유지) — 내부 미디어가 프레임을 채우도록 레이아웃 강제.
Storybook 스토리 추가
docs/stories/ImageFrame.stories.tsx		 ImageFrame용 Storybook 파일 추가: 기본 meta, 데코레이터, 여러 스토리(라이트/다크/폰트 스케일 변형) 및 테이블 기반 사례 렌더링 템플릿 도입.
StackFlow 예제 활동 추가
examples/stackflow-spa/src/activities/ActivityListImageFrame.tsx		 새 Activity 컴포넌트 추가: 이미지 리스트 렌더링, 네비게이션(push), PTR 리프레시 시뮬레이션 및 StackFlow Register 타입 보강.
예제 앱 네비게이션 업데이트
examples/stackflow-spa/src/activities/ActivityHome.tsx		 ActivityHome의 네비게이션 목록에 ListImageFrame 항목 추가(클릭 시 ActivityListImageFrame으로 이동).
Stack 구성 등록
examples/stackflow-spa/src/stackflow/Stack.tsx		 components 맵에 ActivityListImageFrame을 lazy 로드로 등록하여 해당 Activity를 노출.
StackFlow 라우트 구성
examples/stackflow-spa/src/stackflow/stackflow.config.ts		 활동 목록에 { route: "/list-image-frame", name: "ActivityListImageFrame" } 항목 추가로 라우트 등록.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 살금살금 캔버스 위로,
사진이 넓게 퍼져 앉았네.
가로·세로 꽉 채운 채로,
프레임 안에서 춤을 추고,
토끼는 깡충, 기쁨을 나누네.

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately reflects the main change: adding width and height styling to ImageFrame media elements to fix aspect ratio handling.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch fix/image-frame-width-height

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@junghyeonsu junghyeonsu changed the title fix: ImageFrame media sizing for aspect ratio fix(css): ImageFrame media sizing for aspect ratio Feb 4, 2026
@cloudflare-workers-and-pages
Copy link

cloudflare-workers-and-pages bot commented Feb 4, 2026 •
edited
Loading

Deploying seed-design-v3 with  Cloudflare Pages  Cloudflare Pages

Latest commit: d65c45a
Status: ✅  Deploy successful!
Preview URL: https://6406c460.seed-design.pages.dev
Branch Preview URL: https://fix-image-frame-width-height.seed-design.pages.dev

View logs

@junghyeonsu junghyeonsu merged commit 15010c3 into dev Feb 4, 2026
11 checks passed
@junghyeonsu junghyeonsu deleted the fix/image-frame-width-height branch February 4, 2026 10:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

@junghyeonsu junghyeonsu

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@junghyeonsu